<template>
<div class="big_left-3">
  <blockTitle title="问题统计"></blockTitle>
  <div class="main">
    <div class="main-top">
      <div :class="tabIndex===index?'main-top-1 active':'main-top-1'" v-for="(item,index) in tabList" @click="handleChange(index)">
        {{ item.name }}
      </div>
    </div>
    <div class="main-bottom">
      <div id="chart4"></div>
      <div id="chart5"></div>
    </div>
  </div>
</div>
</template>

<script>
import blockTitle from './big-title'
export default {
  name: "left-1",
  components: {
    blockTitle
  },
  data() {
    return {
      tabIndex: 0,
      tabList: [
        { name: '钻井' },
        { name: '试油（气）' },
        { name: '测井' },
        { name: '录井' },
        { name: '修井' },
      ]
    }
  },
  mounted() {
    this.initChart4();
    this.initChart5();
  },
  methods: {
    initChart4() {
      let chartDom = document.getElementById('chart4')
      let myChart = this.$echarts.init(chartDom)
      myChart.setOption(
        {
          title: {
            text: '级别分类',
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: '16',
              color: '#01AAFF'
            },
          },
          grid: {
            top: '13%',
            left: '2%',
            right: '3%',
            bottom: '2%',
            containLabel: true
          },
          legend: {
            x: 'center',      //可设定图例在左、右、居中
            y: 'bottom',     //可设定图例在上、下、居中
            padding: [10, 10, 0, 0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
            show: true,
            //legend横向显示
            // orient: 'vertical',
            textStyle: {
              color: 'auto'
            }
          },
          tooltip: {
            show: true,
            trigger: 'item',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: '{a} <br/>{b} : {c} <br/>百分比 : {d}%', //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'outside'
              },
              emphasis: {
                label: {
                  show: false,
                  // fontSize: '20',
                  // fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: (list) => {
                    // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
                    var colorList = [
                      {
                        colorStart:'#0072FF',
                        colorEnd:'#00EAFF'
                      },
                      {
                        colorStart:'#FF9000',
                        colorEnd:'#FFC069'
                      }
                    ]
                    return new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //左、下、右、上
                      offset: 0,
                      color: colorList[list.dataIndex]['colorStart']
                    }, {
                      offset: 1,
                      color: colorList[list.dataIndex]['colorEnd']
                    }])
                  }
                }
              },
              data: [
                { value: 1048, name: '一般' },
                { value: 735, name: '较大及以上' },
              ]
            }
          ]
        }
      )
      // 让图表自适应
      window.addEventListener('resize', function () {
        myChart.resize()  // myChart 是实例对象
      })
    },
    initChart5() {
      let chartDom = document.getElementById('chart5')
      let myChart = this.$echarts.init(chartDom)
      myChart.setOption(
        {
          title: {
            text: '工程分类',
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: '16',
              color: '#01AAFF'
            },
          },
          grid: {
            top: '13%',
            left: '2%',
            right: '3%',
            bottom: '2%',
            containLabel: true
          },
          legend: {
            x: 'center',      //可设定图例在左、右、居中
            y: 'bottom',     //可设定图例在上、下、居中
            padding: [10, 10, 0, 0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
            show: false,
            //legend横向显示
            // orient: 'vertical',
            textStyle: {
              color: 'auto'
            }
          },
          tooltip: {
            // backgroundColor: 'rgba(65,114,231,0.8)',
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: '{a} <br/>{b} : {c} <br/>百分比 : {d}%', //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
          },
          series: [
            {
              name: '工程分类',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: 'outside'
              },
              labelLine: {
                show: true
              },
              emphasis: {
                label: {
                  show: true,
                  // fontSize: '40',
                  // fontWeight: 'bold'
                }
              },
              itemStyle: {
                normal: {
                  color: function (colors) {
                    var colorList = [
                      '#8A00FF',
                      '#1BA344',
                      '#4ADFCB',
                      '#0271F4',
                      '#FF9000'
                    ];
                    return colorList[colors.dataIndex];
                  },
                },
              },
              data: [
                { value: 1048, name: '质量' },
                { value: 735, name: '安全' },
                { value: 580, name: '环保' },
                { value: 484, name: '合规性' },
                { value: 300, name: '井控' },
              ]
            }
          ]
        }
      )
      // 让图表自适应
      window.addEventListener('resize', function () {
        myChart.resize()  // myChart 是实例对象
      })
    },
    handleChange(index) {
      this.tabIndex = index;
    }
  }
}
</script>

<style scoped lang="scss">
.big_left-3 {
  height: 30%;
  .main {
    width: 100%;
    height: calc(100% - 20px);
    background: url("../../assets/images/big_left_bg.png");
    background-size: 100% 100%;
    padding: 20px;
    .main-top {
      display: flex;
      .main-top-1 {
        width: 82px;
        height: 23px;
        line-height: 23px;
        text-align: center;
        margin-right: 10px;
        background: url("../../assets/images/big_tag_bg.png");
        background-size: 100% 100%;
        color: #0FABF6;
        cursor: pointer;
        &.active {
          background: url("../../assets/images/big_tag_bg_active.png");
          background-size: 100% 100%;
          color: #FFCB2B;
        }
      }
    }
    .main-bottom {
      margin-top: 10px;
      width: 100%;
      height: 85%;
      display: flex;
      justify-content: space-between;
      #chart4 {
        width: 45%;
        height: 100%;
      }
      #chart5 {
        width: 54%;
        height: 100%;
      }
    }
  }

}
</style>
